<!-- 选择资产弹窗 -->
<template>
  <div>
    <el-dialog v-model="dialogVisible" title="关联配置项" width="1100">
      <div class="select-asset-mask" v-loading="loading" :style="{ height: '500px' }">
        <TreeFilter
          style="margin-right: 20px"
          title=""
          :data="classifyList"
          label="data"
          :default-value="defaultTreeValue"
          @change="changeTreeFilter"
        />
        <div style="flex: 1">
          <ProTable
            ref="proTable"
            :columns="columns"
            :request-api="getTableList"
            :data-callback="dataCallback"
            row-key="userId"
            :tool-button="false"
            height="535"
          >
            <template #tableHeader="scope">
              <div v-if="scope">
                <el-form :inline="true">
                  <el-form-item label="使用人">
                    <el-input v-model="form.userName" style="width: 200px" clearable />
                  </el-form-item>
                  <el-form-item label="负责人">
                    <el-input v-model="form.owner" style="width: 200px" clearable />
                  </el-form-item>
                  <el-form-item label="">
                    <el-button type="primary" style="margin: 0" @click="search">搜索</el-button>
                  </el-form-item>
                </el-form>
              </div>
            </template>
            <!-- 状态 -->
            <template #status="scope">
              <div v-if="scope.row.statusColor" :style="{ background: scope.row.statusColor }" style="color: #ffffff">
                {{ scope.row.status }}
              </div>
              <div v-else>{{ scope.row.status }}</div>
            </template>
            <!-- 操作 -->
            <template #operation="scope">
              <div>
                <el-button type="primary" plain @click="selectItem(scope.row)">选择</el-button>
              </div>
            </template>
          </ProTable>
        </div>
      </div>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="selectMultiple">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="SelectAssetMask">
import { ref, reactive, watch } from "vue";
import TreeFilter from "@/components/TreeFilter/index.vue";
import ProTable from "@/components/ProTable/index.vue";
import { ProTableInstance } from "@/components/ProTable/interface";
import { useUserStore } from "@/stores/modules/user";
import { getConfigurationCategoryTree, cItemsFind } from "@/api/modules/assetManagement";

const userStore = useUserStore();

const classifyList = ref<any[]>([]);
const defaultTreeValue = ref([]);

getConfigurationCategoryTree({
  findAll: false,
  userName: userStore.username,
  _: new Date().getTime(),
  parentEventId: 0
}).then(res => {
  let list: any[] = [res];
  list.forEach(item => {
    item.level = 1;
    item.id = item.attr.cno;
    if (item.children) {
      item.children.forEach(vo => {
        vo.level = 2;
        vo.id = vo.attr.cno;
      });
    }
  });
  classifyList.value = list;
});

// ProTable 实例
const proTable = ref<ProTableInstance>();

// 表格配置项
const columns = reactive<any>([
  { type: "selection", fixed: "left", width: 60 },
  { prop: "categoryName", label: "分类" },
  { prop: "cino", label: "编号" },
  { prop: "ciname", label: "名称" },
  { prop: "status", label: "状态", width: "120" },
  { prop: "operation", label: "操作", width: "150" }
]);

const form = reactive({
  categoryNo: "",
  userName: "",
  owner: ""
});

const props = defineProps({
  userName: {
    type: String,
    default: ""
  }
});

watch(
  () => props.userName,
  val => {
    form.userName = val;
  }
);

form.userName = props.userName;

const loading = ref(false);

// 如果你想在请求之前对当前请求参数做一些操作，可以自定义如下函数：params 为当前所有的请求参数（包括分页），最后返回请求列表接口
const getTableList = (params: any) => {
  loading.value = true;
  let txt = "ciQueryDTO.categoryNo=" + form.categoryNo;
  return cItemsFind(txt, {
    "ciQueryDTO.companyNo": userStore.userInfo.companyNo,
    // "ciQueryDTO.loginName": userStore.username,
    "ciQueryDTO.userName": form.userName,
    "ciQueryDTO.owner": form.owner,
    _search: false,
    nd: new Date().getTime(),
    sidx: "ciId",
    sord: "desc",
    page: params.pageNum,
    rows: params.pageSize
  }).catch(() => {
    loading.value = false;
  });
};

// dataCallback 是对于返回的表格数据做处理
const dataCallback = (data: any) => {
  loading.value = false;
  return {
    list: data.data,
    total: data.totalSize,
    pageNum: data.page,
    pageSize: data.rows
  };
};

const changeTreeFilter = e => {
  if (e instanceof Array) {
    return;
  }
  form.categoryNo = e;
  proTable.value?.getTableList();
};

const search = () => {
  proTable.value?.getTableList();
};

interface Asset {
  ciId: number;
  cino: string;
  categoryName: string;
  ciname: string;
  status: string;
  statusColor: string;
}

// 定义 emit 事件
const emit = defineEmits<{
  (e: "change", data: Asset[]): void;
}>();

// 选择资产
const selectItem = (data: Asset) => {
  dialogVisible.value = false;
  emit("change", [data]);
};

// 多选
const selectMultiple = () => {
  dialogVisible.value = false;
  let list = ref<any[]>([]);
  if (proTable.value?.selectedList) {
    list.value = proTable.value.selectedList;
  }
  emit("change", list.value);
};

const dialogVisible = ref(false);

const open = () => {
  dialogVisible.value = true;
};

defineExpose({
  open
});
</script>

<style lang="scss" scoped>
.select-asset-mask {
  display: flex;
}
:deep(.card) {
  padding: 0;
  border: none;
  box-shadow: none;
}
</style>
